<template>
  <div>
    <common-map>
      <template slot="header">
        <el-date-picker
          class="date-picker"
          v-model="dateValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        />
        <el-select
          v-model="timeValue"
          placeholder="请选择时间粒度"
          class="time-picker"
          popper-class="select-popper"
        >
          <el-option
            v-for="item in timeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="typeValue"
          placeholder="请选择流量类型"
          class="type-picker"
          popper-class="select-popper"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="confirm">搜索</el-button>
      </template>
      <template slot="main">
        <v-chart :options="lineMapConfig" autoresize></v-chart>
      </template>
    </common-map>
  </div>
</template>

<script>
import CommonMap from '@/components/CommonMap/index.vue'
import CommonDataMixin from '@/mixins/commonDataMixin'

export default {
  name: 'index',
  data () {
    return {
      timeValue: null, // 时间粒度的值
      timeOptions: [
        {
          value: 5,
          label: '5s'
        },
        {
          value: 10,
          label: '10s'
        },
        {
          value: 30,
          label: '30s'
        },
        {
          value: 60,
          label: '60s'
        },
        {
          value: 1200,
          label: '1200s'
        },
        {
          value: 3600,
          label: '3600s'
        },
        {
          value: 86400,
          label: '86400ms'
        }
      ],
      lineMapConfig: {}
    }
  },
  components: {
    CommonMap
  },
  mixins: [CommonDataMixin],
  methods: {
    render (xAxisData, lineData) {
      this.lineMapConfig = {
        title: {
          text: '地区客流车流情况时间维度折线图',
          subtext: '(覆盖区域表示未来一天的预测数据)',
          left: 'center',
          textStyle: {
            color: '#ffffff'
          },
          padding: [50, 0, 0, 50]
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          }
        },
        dataZoom: [
          {
            type: 'slider',
            handleIcon:
              'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            bottom: 40,
            textStyle: {
              color: 'rgb(255, 255, 255)'
            }
          }
        ],
        grid: {
          x: 150,
          y: 100,
          x2: 150,
          y2: 100
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          }
        },
        series: [
          {
            data: lineData,
            smooth: true,
            type: 'line',
            markArea: {
              itemStyle: {
                color: 'rgba(43, 196, 243, 0.42)'
              }
            },
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(0,242,241)' // 0% 处的颜色
                  },
                  {
                    offset: 0.25,
                    color: 'rgb(162,216,0)' // 25% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: 'rgb(254,228,0)' // 50% 处的颜色
                  },
                  {
                    offset: 0.75,
                    color: 'rgb(237,63,53)' // 75% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgb(245,116,116)' // 100% 处的颜色
                  }
                ]
              }
            }
          }
        ]
      }
    },
    confirm () {
      if (this.dateValue && this.timeValue != null && this.typeValue != null) {
        const dateValue = this.convertDateToStr(this.dateValue)
        const typeValue = this.typeValue
        const timeValue = this.timeValue
        const options = {
          startTime: dateValue[0],
          endTime: dateValue[1],
          splitTime: timeValue,
          area: 0,
          data: typeValue
        }
        this.$emit('confirm', options)
      } else {
        this.$message.error('请选择完毕后再进行搜索！')
      }
    },
    // 等分时间
    splitTime (startDate, endDate, amount) {
      const startTime = new Date(startDate)
      const endTime = new Date(endDate)
      const gap = (endTime - startTime) / amount
      const temp = []
      for (let i = 0; i < amount; i++) {
        startTime.setMilliseconds(startTime.getMilliseconds() + gap)
        temp[i] = new Date(startTime.getTime()).format('yyyy-MM-dd hh:mm:ss')
      }
      return temp
    }
  },
  mounted () {
    this.render(
      [
        '2020-10:24 00:00:00',
        '2020-10:24 00:04:00',
        '2020-10:24 00:08:00',
        '2020-10:24 00:12:00',
        '2020-10:24 00:16:00',
        '2020-10:24 00:20:00'
      ],
      [0, 0, 0, 0, 0, 0]
    )
  },
  computed: {
    // 获取中国地图的请求数据
    lineMapData () {
      return this.getLineMapData()
    }
  },
  watch: {
    lineMapData () {
      const data = this.lineMapData
      let lineData = []
      lineData = lineData.concat(data.result, data.predict)
      const xAxisData = this.splitTime(data.startTime, data.predictTime, lineData.length)
      this.render(xAxisData, lineData)
    }
  },
  inject: ['getLineMapData']
}
</script>

<style scoped>
</style>
